<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>012Basic_Particles</title>
    <link href="../CSS/normalize.min.css"  rel="stylesheet">
    <link href="../CSS/slideout.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/font-awesome.min.css"  rel="stylesheet">
    <link href="../CSS/perfect-scrollbar.min.css"  rel="stylesheet">
    <link href="../CSS/main.css"  rel="stylesheet">
</head>
<body>
<!--@@下面是翻译正文@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<nav id="menu"></nav><nav class="nav-main"><!-- Hamburger menu : displayed only in small screens--><i class="fa fa-bars" id="mobilemenu"></i><!-- this button only shows on mobile version of a "class" page-->
    <div class="banner">
        <div class="menu">
            <div class="do-not-hover" id="home"><a style="cursor: help;" href="http://doc.babylonjs.com/">Babylon.js | DOCUMENTATION</a></div>
            <div class="item" id="whatsnew"><a style="cursor: help;" href="http://doc.babylonjs.com/whats-new">What's new</a></div>
            <div class="item" id="general"><a style="cursor: help;" href="http://doc.babylonjs.com/generals">General</a></div>
            <div class="item active" id="tutorials"><a style="cursor: help;" href="http://doc.babylonjs.com/tutorials">Tutorials</a></div>
            <div class="item" id="overview"><a style="cursor: help;" href="http://doc.babylonjs.com/overviews">Overviews</a></div>
            <div class="item" id="exporters"><a style="cursor: help;" href="http://doc.babylonjs.com/exporters">Exporters</a></div>
            <div class="item" id="extensions"><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/extensions">Extensions</a></div>
            <div class="item" id="classes"><a style="cursor: help;" href="http://doc.babylonjs.com/classes">Classes</a></div>
            <div class="item" id="playground"><a style="cursor: help;" href="http://doc.babylonjs.com/playground">Playground</a></div></div>
        <div class="more">
            <div class="searchbar">
                <form action="/search" method="get"><input name="q" type="text" placeholder="Search..." value=""><button type="submit"><i class="fa fa-search"></i></button></form></div></div></div></nav>
<div id="wrapper">
    <div class="statics-banner">
        <h1 style="border-image: none; cursor: help;">教程</h1></div>
    <div class="horizontal-separator"></div>
    <div class="static-content">
        <h1 style="border-image: none; cursor: help;">粒子</h1><br>
        <div class="contentTable">
            <div class="tocHeader"><span class="tocTitle" style="border-image: none; cursor: help;"><i class="tocIcon fa fa-book"></i>内容列表</span><span class="tocToggle"><i class="fa fa-arrow-up"></i></span></div>
            <div class="tocContent">
                <ul>
                    <li><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Particles#introduction">简介</a></li>
                    <li><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Particles#how-can-i-do-this">怎么做 ?</a>
                        <ul>
                            <li><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Particles#customeffect-the-fourth-parameter-in-the-constructor">自定义效果（构造函数的第四个参数）</a></li></ul></li>
                    <li><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Particles#custom-functions">自定义函数</a></li>
                    <li><a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Particles#next-step">下一步</a></li></ul></div></div>
        <div id="staticContent">
            <h2 style="border-image: none; cursor: help;"><a name="introduction" class="anchor" href="http://doc.babylonjs.com/tutorials/Particles#introduction"></a>简介</h2>
            <p style="border-image: none; cursor: help;">这篇教程将要讨论Babylonjs中的粒子系统。粒子通常是细小的精灵对象用来模拟难以重复再现的事物比如火焰、烟雾、水流或者抽象的视觉效果比如魔法闪光和幻想粉尘。</p>
            <p><img alt="Particles" src="../IMAGE/11-15/12.png"></p>
            <p style="border-image: none; cursor: help;">一张图片属于<a style="border-image: none; cursor: help;" href="http://babylonjs-playground.azurewebsites.net/?12">playground的粒子系统示例</a></p>
            <h2 style="border-image: none; cursor: help;"><a name="how-can-i-do-this" class="anchor" href="http://doc.babylonjs.com/tutorials/Particles#how-can-i-do-this"></a>怎样做 ?</h2>
            <p style="border-image: none; cursor: help;">为了显示这个魔法戏法，第一件要做的事是建立一个新的对象，这个对象将作为粒子的发射器。在我们的示例中，一个立方体将被作为发射器对象，代表粒子的源泉。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">var fountain = BABYLON.Mesh.CreateBox("fountain", 1.0, scene);
</code></pre>
            <p style="border-image: none; cursor: help;">发射器作为粒子的来源，并且它在3D空间中的位置决定了粒子从哪里出现以及怎样移动。所以请注意这个对象的位置和角度。在我们的示例中，这个发射器是我们的源泉，但是如果你需要，你可以只使用一个点（BABYLON.Vector3）作为发射器。</p>
            <p style="border-image: none; cursor: help;">现在，我们必须建立一个新的（还没有渲染）粒子系统对象：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene, customEffect);
</code></pre>
            <p style="border-image: none; cursor: help;">简单。第一个参数是名字，第二个参数是粒子的最大数量，第三个参数是场景，第四个可选的参数代表粒子的着色器，用来代替默认的着色器。我将在后文中讨论第四个参数。</p>
            <p style="border-image: none; cursor: help;">一个重要的部分时定义每一个粒子的纹理。每一个粒子将具有相同的图案，所以请仔细的选择你需要哪一个图案。但是请注意一个场景里可以包含多个粒子系统，并且每个粒子系统只能发射具有唯一图案的例子。同时也请注意多个粒子系统可以使用同一个发射器对象。我们的粒子纹理将是这个：</p>
            <p><img alt="Flare" src="../IMAGE/11-15/Flare.png"></p>
            <p style="border-image: none; cursor: help;">为了定义离子的纹理，添加这样的一行:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
</code></pre>
            <p style="border-image: none; cursor: help;">(在 playground示例中, 我们使用 /textures/flare.png)</p>
            <p style="border-image: none; cursor: help;">对于这个纹理，你可以使用一个可选的遮罩来过滤一些颜色，或者过滤掉一部分的透明度通道。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
</code></pre>
            <p style="border-image: none; cursor: help;">这个上述设定的输出:</p>
            <p><img alt="TextureMask" src="../IMAGE/11-15/12-1.png"></p>
            <p style="border-image: none; cursor: help;">最后一件重要的事是定义我们前面说过的发射器:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">// Where the particles comes from
    particleSystem.emitter = fountain; // the starting object, the emitter, a box in this case.
</code></pre>
            <p style="border-image: none; cursor: help;">现在你将看到粒子系统开始工作。但是这可能不是我们的最终结果。我们可以重定义一些参数：</p>
            <ul>
                <li style="border-image: none; cursor: help;">围绕发射器的盒子。我们的发射器是粒子来源的中心，但是如果你希望你的粒子从不止一个点发射出来，那么你可以让它这样做：<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all From
                    particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...
                </code></pre></li></ul>
            <p style="border-image: none; cursor: help;">正如你所见，粒子被从X轴上的不同位置发射出来:</p>
            <p><img alt="EmitBox" src="../IMAGE/11-15/12-2.png"></p>
            <ul>
                <li>
                    <p style="border-image: none; cursor: help;">现在你可以个你的粒子一些颜色。颜色一和颜色二被合成，而“colorDead”则是粒子在消失之前所变化的颜色。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">// Colors of all particles (splited in 2 + specific color before dispose)
    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">粒子的尺寸:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">// 每个粒子的尺寸（随机在最大最小值之间变化）
    particleSystem.minSize = 0.1;
    particleSystem.maxSize = 0.5;
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">粒子存在时间:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">// Life time of each particle (random between...)
    particleSystem.minLifeTime = 0.3;
    particleSystem.maxLifeTime = 1.5;
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">发射频率。这决定了粒子的密度和粒子流的发射频率:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.emitRate = 1000;
</code></pre></li></ul>
            <p><img alt="emitRate" src="../IMAGE/11-15/12-3.png"></p>
            <p style="border-image: none; cursor: help;">如果你只想每次发射有限的一些粒子，也可以做到。例如，如果你只想发射300个粒子：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.manualEmitCount = 300;
</code></pre>
            <p style="border-image: none; cursor: help;">请注意这个流是不持续的。这个一个一次性的粒子发射，所以这个函数会覆盖前面的“emitRate”参数。</p>
            <ul>
                <li>
                    <p style="border-image: none; cursor: help;">选择的粒子模式。你可以在“BLENDMODE_ONEONE” （默认选择：源颜色被加入到目标颜色中不考虑透明度对结果的影响），和“BLENDMODE_STANDARD”（通过粒子的透明度混合当前颜色和粒子颜色）中选择。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">重力。你可以使用重力如果以希望给你的粒子一个方向（比如：火焰粒子沿Y轴向上移动）</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">//Set the gravity of all particles (not necessarily down)
    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">方向。在每个粒子被发射后随即绝地其方向，在方向向量1和方向向量2之间。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
    particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
</code></pre></li></ul>
            <p><img alt="emitRate" src="../IMAGE/11-15/12-4.png"></p>
            <ul>
                <li>
                    <p style="border-image: none; cursor: help;">角速度. 你可以定义一个绕Z轴的旋转给每一个粒子（以弧度表示）：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.minAngularSpeed = 0;
    particleSystem.maxAngularSpeed = Math.PI;
</code></pre></li>
                <li>
                    <p style="border-image: none; cursor: help;">速度/强度。你可以定义粒子发射的强度，和整体运动速度（更新速度默认为0.01，更快的更新等于更快的动画。）</p>
                    <pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.minEmitPower = 1;
                        particleSystem.maxEmitPower = 3;
                        particleSystem.updateSpeed = 0.005;
                    </code></pre>
                </li>
            </ul>
            <p style="border-image: none; cursor: help;">持续时间。你可以设置粒子系统运行的时间（受上面的整体速度影响）。</p>

<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">
    particleSystem.targetStopDuration = 5;
</code></pre>
            <ul>
                <li style="border-image: none; cursor: help;">处置。在停止时处置（或不处置）粒子系统（非常有用如果你希望建立一个一次性的粒子系统带有一个确定的目标停止时间）<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.disposeOnStop = true;
                </code></pre></li></ul>
            <p style="border-image: none; cursor: help;">最后，你可以任何时候在你的代码中启动这个粒子系统通过:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.start();
</code></pre>
            <p style="border-image: none; cursor: help;">以及自然地停止它:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">particleSystem.stop();
</code></pre>
            <p style="border-image: none; cursor: help;">请尽情测试这个场景... <a href="http://babylonjs-playground.azurewebsites.net/?12"><strong style="border-image: none; cursor: help;">在我们的在线playground中</strong></a>.</p>
            <h3 style="border-image: none; cursor: help;"><a name="customeffect-the-fourth-parameter-in-the-constructor" class="anchor" href="http://doc.babylonjs.com/tutorials/Particles#customeffect-the-fourth-parameter-in-the-constructor"></a>自定义效果（构造函数中的第四个参数）</h3>
            <p style="border-image: none; cursor: help;">var ps = new BABYLON.ParticleSystem("particles", 2000, scene,
                <strong style="border-image: none; cursor: help;">customEffect</strong>);</p>
            <p style="border-image: none; cursor: help;"> customEffect是一种BABYLON.Effect对象用来指向一个可用的着色器程序.</p>
            <p style="border-image: none; cursor: help;">Babylonjs的原始作者非常大方的给了我们 <a style="border-image: none; cursor: help;" href="http://babylonjs-playground.azurewebsites.net/#1ASENS">一个神奇的playground示例关于使用片元着色器效果的例子系统</a>.访问这个链接，然后你可以看到一个存储在着色器存储器里的片元着色器程序。注意这一行:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">BABYLON.Effect.ShadersStore["myParticleFragmentShader"] = [...]
</code></pre>
            <p style="border-image: none; cursor: help;">下面一点，你可以看到:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">var effect = engine.createEffectForParticles("myParticle", ["time"]);
</code></pre>
            <p style="border-image: none; cursor: help;"><em style="border-image: none; cursor: help;">.createEffectForParticles</em>接收如下的参数:</p>
            <ul>
                <li style="border-image: none; cursor: help;">片元名称（可以是着色器存储器中的名称也可以是一个DOM元素的id）（有些教程作者喜欢把glsl代码写在一个单独的html标签里）</li>
                <li style="border-image: none; cursor: help;">额外的参数数组 (uniform数据类型)（在glsl中uniform指“全局量”）</li>
                <li style="border-image: none; cursor: help;">额外的样板数组 (为了额外的纹理!)</li></ul>
            <p style="border-image: none; cursor: help;">粒子效果对象是一个轻度修改的<a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/classes/Effect">Babylon效果对象</a>对象. 同样要注意着色器存储器是一个命名空间基于特定的<a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/classes/Effect">效果对象</a>.
            </p>
            <p style="border-image: none; cursor: help;">效果对象有多个setter方法，其中的一个是
                <em style="border-image: none; cursor: help;">.setFloat</em>. 请注意他被使用在registerBeforeRender 方法中。这使得效果的速度在一个20秒的时间跨度间循环。我们（这个示例的作者）相应的变化这个片元着色器的时间参数。。。通过这个场景的渲染循环！我们爱它！</p>
            <p style="border-image: none; cursor: help;">这是一条短注释来自 Deltakosh... 关于上面链接的示例:</p>
            <blockquote>
                <p style="border-image: none; cursor: help;">默认情况下Babylon.js 将给你一个vUV 和一个 vColor调整参数。它们将为你传送粒子的纹理.但是你也可以自由的加入任何新的参数，就像我对“time”做的一样。</p></blockquote>
            <p style="border-image: none; cursor: help;">这一段教程正在建设中。我们将很快有更多可说的东西.（着色器编程是3D引擎编写的最核心技术，只有少数人能真正掌握。关于这方面的中文著作基本没有，译作则多为十几二十年前的旧书。着色器程序在高级语言环境中进行编译连接，然后送入显卡的GPU中执行。着色器分为“顶点着色器”和“片元着色器”两种，顶点着色器负责计算网格的每一顶点的位置和颜色，片元着色器负责在顶点之间插值生成像素。）</p>
            <h2 style="border-image: none; cursor: help;"><a name="custom-functions" class="anchor" href="http://doc.babylonjs.com/tutorials/Particles#custom-functions"></a>自定义函数</h2>
            <p style="border-image: none; cursor: help;">你可以对粒子进行更多的控制通过使用自定义函数:
                <code style="border-image: none; cursor: help;">startDirectionFunction: (emitPower: number, worldMatrix: Matrix,
                    directionToUpdate: Vector3)</code>: 这个函数可以被定义来专门的初始化每一个新粒子的方向。默认情况下，这个函数被如下代码定义：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">startDirectionFunction = (emitPower: number, worldMatrix: Matrix, directionToUpdate: Vector3): void =&gt; {
    var randX = randomNumber(this.direction1.x, this.direction2.x);
    var randY = randomNumber(this.direction1.y, this.direction2.y);
    var randZ = randomNumber(this.direction1.z, this.direction2.z);

    Vector3.TransformNormalFromFloatsToRef(randX * emitPower, randY * emitPower, randZ * emitPower, worldMatrix, directionToUpdate);
    }
</code></pre>
            <p style="border-image: none; cursor: help;"><code class="lang-javascript hljs" style="border-image: none; cursor: help;">startPositionFunction = (worldMatrix: Matrix, positionToUpdate:
                Vector3)</code>: 这个函数被定义来为每个新的粒子专门初始化位置。默认情况下，这个函数被定义为如下代码：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">startPositionFunction = (worldMatrix: Matrix, positionToUpdate: Vector3): void =&gt; {
    var randX = randomNumber(this.minEmitBox.x, this.maxEmitBox.x);
    var randY = randomNumber(this.minEmitBox.y, this.maxEmitBox.y);
    var randZ = randomNumber(this.minEmitBox.z, this.maxEmitBox.z);

    Vector3.TransformCoordinatesFromFloatsToRef(randX, randY, randZ, worldMatrix, positionToUpdate);
    }
</code></pre>
            <p style="border-image: none; cursor: help;"><code style="border-image: none; cursor: help;">updateFunction: (particles: Particle[])</code>: 这个函数可以被定义来为活动的粒子提供自定义的更新方法。这个函数将会被调用来代替通常的update (age, position, color, etc.). 不要忘记这个函数会在每一帧中被调用，所以请保持他简单和快速 :). 默认情况下以下代码被使用:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">updateFunction = function(particles) {
    for (var index = 0; index &lt; particles.length; index++) {
    var particle = particles[index];
    particle.age += this._scaledUpdateSpeed;

    if (particle.age &gt;= particle.lifeTime) { // Recycle
    particles.splice(index, 1);
    this._stockParticles.push(particle);
    index--;
    continue;
    }
    else {
    particle.colorStep.scaleToRef(this._scaledUpdateSpeed, this._scaledColorStep);
    particle.color.addInPlace(this._scaledColorStep);

    if (particle.color.a &lt; 0)
    particle.color.a = 0;

    particle.angle += particle.angularSpeed * this._scaledUpdateSpeed;

    particle.direction.scaleToRef(this._scaledUpdateSpeed, this._scaledDirection);
    particle.position.addInPlace(this._scaledDirection);

    this.gravity.scaleToRef(this._scaledUpdateSpeed, this._scaledGravity);
    particle.direction.addInPlace(this._scaledGravity);
    }
    }
    }
</code></pre>
            <h2 style="border-image: none; cursor: help;"><a name="next-step" class="anchor" href="http://doc.babylonjs.com/tutorials/Particles#next-step"></a>下一步</h2>
            <p style="border-image: none; cursor: help;">粒子系统是非常强大并且多样的工具，它能帮助为你的场景带来真实性和动态性。不要犹豫使用它们，因为它们并不非常消耗资源。</p>
            <p style="border-image: none; cursor: help;">与我们一起，意为我们将学习一个新的、非常有趣的东西: <a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Environment">设置你的环境</a>.</p></div></div>
</div>

<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<footer class="footer"><div class="footer-item"><a style="border-image: none; cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>    Forum</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>    Github</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>    Contribute</a></div></footer>
<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png);"></div><div id="tip-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png) repeat-x;"></div><div id="tip-right-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png);"></div><div id="tip-right" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png) repeat-y;"></div><div id="tip-right-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png);"></div><div id="tip-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png) repeat-x;"></div><div id="tip-left-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png);"></div><div id="tip-left" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png);"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png);"></div><div id="tip-arrow-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png);"></div></div>

<!--@@下面是工具脚本@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<div id="div_hidden" style="display: none">
    <div id="div_mod1">
        <div class="div_inmod1" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px" >
            <button onclick="ExportHtml()" style="margin-left: auto;margin-right: auto;float: left;position: relative;left: 10px">导出网页</button>
        </div>
    </div>
    <div id="div_mod2">
        <div class="div_inmod2" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px">
            <div class="div_inmod_head" style="width: 100%;height: 20px;background-color: #E0ECFF;margin:0;border: 0;padding:0;border-bottom: 1px solid">
                <BUTTON title="点击关闭对话框" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击确定修改" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ChangeValue();DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击恢复上一历史状态" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ReloadValue();DeleteWindow();" type=submit></BUTTON>
            </div>
            <textarea class="div_inmod2_content" style="width: 100%;height: 98px;overflow-x: hidden;margin:0;border: 0;padding:0" onchange=""></textarea>
        </div>
    </div>
</div>
<script src="../JS/MYLIB/MIN/Events.min.js"></script>
<script src="../JS/MYLIB/MIN/FileText.min.js"></script>
<script src="../JS/MYLIB/MIN/View.min.js"></script>
<script>
    var bbl_current_obj;
    var bbl_style_temp;
    var bbl_int_count2=0;
    var bbl_arr_history=[];
    window.onload=function()
    {
        delete_div("div_ExportHtml");
        if(true)
            return;
        Open_div("","div_ExportHtml",100,80,0,0);
        var div_ExportHtml=document.getElementById("div_ExportHtml");
        div_ExportHtml.innerHTML=document.getElementById("div_mod1").innerHTML;
        div_ExportHtml.style.position="fixed";
        div_ExportHtml.style.right="0px";
        div_ExportHtml.style.top="300px";
        //div_ExportHtml.style.float="right";
        var int_count=0;//为每一个可调整标签设置不同的tid属性
        var arr_tags=["p","a","span","h1","h2","h3","h4","h5","li","td","th","code","strong","em"];
        var leng=arr_tags.length;
        for(var i=0;i<leng;i++)//对于每一种标签
        {
            var objs=document.getElementsByTagName(arr_tags[i]);
            var leng2=objs.length;
            for(var j=0;j<leng2;j++)//对于每一个标签
            {
                var children=objs[j].childNodes;
                var leng3=children.length;
                for(var k=0;k<leng3;k++)//寻找文本节点
                {
                    if(children[k].nodeName=="#text"&&children[k].textContent.Trim().length>2)
                    {
                        objs[j].tid="tid"+int_count;
                        objs[j].style.cursor="help";
                        objs[j].onmouseover=function()
                        {
                            bbl_style_temp=this.style.border;
                            this.style.border="2px solid rgb(59, 203, 249)";
                            bbl_current_obj=objs[j];
                        }
                        objs[j].onmouseout=function()
                        {
                            this.style.border=bbl_style_temp;
                        }
                        objs[j].onclick=function(){
                            var evt=evt||window.event;
                            cancelEvent(evt);
                            cancelPropagation(evt);
                            //alert(this.textContent);
                            var arr_child=this.childNodes;
                            var leng4=arr_child.length;
                            //首先删除所有已经存在的对话框
                            for(var l=0;l<bbl_int_count2;l++)
                            {
                                delete_div("div_inmod2_"+l);
                            }
                            bbl_int_count2=0;
                            for(var l=0;l<leng4;l++)//对于其中的每一个文本节点，弹出修改对话框
                            {
                                if(arr_child[l].nodeName=="#text"&&arr_child[l].textContent.Trim().length>2)
                                {
                                    Open_div(this,"div_inmod2_"+bbl_int_count2,240,120,0+bbl_int_count2*250,0);
                                    var div_inmod2=document.getElementById("div_inmod2_"+bbl_int_count2);//取出新添加的元素
                                    div_inmod2.ttid=this.getAttribute("tid")?this.getAttribute("tid"):this.tid;//把被选择标签的全局标记交给弹出框
                                    div_inmod2.tobj=this;
                                    div_inmod2.textnum=l;//在文本框中记录，这个文本框对应的是标签的第几个子节点
                                    div_inmod2.innerHTML=document.getElementById("div_mod2").innerHTML;
                                    con_getElementsByClassName("div_inmod2_content",div_inmod2)[0].innerHTML=arr_child[l].textContent;//填入原有值，考虑标签嵌套问题//#text型标签没有innerhtml属性！！
                                    bbl_int_count2++;//记下有多少个，后面删除所有对话框时使用
                                }
                            }
                        }
                        break;
                    }
                }
            }
        }
    }
    function DeleteWindow()
    {//只删除掉点击关闭的这一个标签
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var str_id=obj.parentNode.parentNode.parentNode.id;
        delete_div(str_id);
    }
    //写入修改后的标签值，并写入日志
    function ChangeValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        //document.getElementsByTagName()
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var obj_text=obj.parentNode.parentNode.getElementsByTagName("textarea")[0];//输入的文本框
        if(obj_text.innerHTML.trim().length<1)
        {
            alert("修改后的文本过短");
        }
        else {
            var tobj = div_inmod2.getAttribute("tobj") ? div_inmod2.getAttribute("tobj") : div_inmod2.tobj;//取得该输入框对应的标签
            var ttid = div_inmod2.getAttribute("tid") ? div_inmod2.getAttribute("tid") : div_inmod2.tid;//
            var textnum = div_inmod2.getAttribute("textnum") ? div_inmod2.getAttribute("textnum") : div_inmod2.textnum;
            //写日志
            var arr_temp = [];
            arr_temp.push(ttid + "&" + textnum);
            arr_temp.push(tobj.childNodes[textnum].textContent);
            bbl_arr_history.push(arr_temp);
            //改值
            tobj.childNodes[textnum].textContent = obj_text.innerHTML;
        }
    }
    //根据日志恢复标签内容
    function ReloadValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var tobj=div_inmod2.getAttribute("tobj")?div_inmod2.getAttribute("tobj"):div_inmod2.tobj;//取得该输入框对应的标签
        var ttid=div_inmod2.getAttribute("tid")?div_inmod2.getAttribute("tid"):div_inmod2.tid;//
        var textnum=div_inmod2.getAttribute("textnum")?div_inmod2.getAttribute("textnum"):div_inmod2.textnum;


        var flag=0;//0表示没有找到，对应的日志记录
        var leng=bbl_arr_history.length;
        for(var i=leng-1;i>=0;i--)
        {
            var str=ttid+"&"+textnum;
            if(bbl_arr_history[i][0]==str)//找到新的这一条
            {
                tobj.childNodes[textnum].textContent=bbl_arr_history[i][1];
                bbl_arr_history.splice(i,1);//将日志里的这一条删除
                flag=1;
                break;
            }
        }
        if(flag==0)
        {
            alert("没有日志记录！");
        }
    }
    //以html格式导出网页
    function ExportHtml()
    {
        DownloadText(MakeDateStr()+document.title,("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>"));
    }
</script>
</body>
</html>